<template>
  <div
    :class="{ unLockLogin: isShowForm }"
    class="locked"
    @keyup="isShowForm = true"
    @mousedown.stop
    @contextmenu.prevent
  >
    <template v-if="!isShowForm">
      <div class="lock-box">
        <div class="lock">
          <span class="lock-icon" title="解锁屏幕" @click="isShowForm = true">
            <icon name="Lock" size="30" />
          </span>
        </div>
        <h6 class="tips">点击解锁</h6>
      </div>
      <charging :is-mobile="isMobile" />
      <template v-if="!isMobile">
        <div class="local-time">
          <div class="time">{{ hour }}:{{ minute }}</div>
          <div class="date">{{ month }}月{{ day }}号，星期{{ week }}</div>
        </div>
        <div class="computer-status">
          <span :class="{ offline: !online }" class="network">
            <icon name="wifi" :type="ICON_TYPE.SVG" size="30" class="network" />
          </span>
          <icon name="api" :type="ICON_TYPE.SVG" size="30" />
        </div>
      </template>
    </template>
    <template v-else>
      <div class="login-box">
        <el-avatar
          :size="80"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
        <div class="username">{{ userInfo?.username }}</div>
        <el-input
          v-model="password"
          autofocus
          :placeholder="placeholder"
          type="password"
          prefix-icon="Lock"
        />
        <div class="flex" style="width: 100%; justify-content: space-between">
          <template v-if="lockPwd">
            <el-button link type="primary" @click="hideLockForm"
              >返回</el-button
            >
            <el-button link type="primary" @click="backLogin"
              >返回登录</el-button
            >
            <el-button link type="primary" @click="onLogin">进入系统</el-button>
          </template>
          <template v-else>
            <el-button link type="primary" @click="cancel">取消锁屏</el-button>
            <el-button link type="primary" @click="confirm">确定锁屏</el-button>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ICON_TYPE } from '@/const'
import useOnline from '@/hooks/useOnline'
import useTime from '@/hooks/useTime'
import useLockStore from '@/store/modules/lock-screen'
import useUserStore from '@/store/modules/user'
import useConfigStore from '@/store/modules/config'
import Charging from './charging'

const { lockPwd, setLockPwd, setLock, verifyLockPwd } = useLockStore()
const { userInfo, logout } = useUserStore()
const { online } = useOnline()
const { hour, minute, month, day, week } = useTime()

const isShowForm = ref(!lockPwd)
const password = ref('')

const placeholder = computed(() =>
  lockPwd ? '请输入锁屏密码或用户密码' : '请输入锁屏密码(随便填)',
)
const isMobile = computed(() => useConfigStore().isMobile)

function confirm() {
  const pwd = password.value.trim()
  setLockPwd(pwd)
  hideLockForm()
}

function cancel() {
  isShowForm.value = false
  setLock(false)
}

function hideLockForm() {
  isShowForm.value = false
  password.value = ''
}

function onLogin() {
  const pwd = password.value.trim()
  if (!pwd) {
    return ElMessage.warning('密码不能为空')
  }

  if (verifyLockPwd(pwd)) {
    unlock()
  } else {
    return ElMessage.warning('密码错误，请重新输入')
  }
}

function backLogin() {
  isShowForm.value = false
  setLock(false)
  logout()
}

function unlock() {
  isShowForm.value = false
  setLock(false)
}
</script>

<style lang="scss" scoped>
.locked {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  background-color: #141414;
  color: var(--el-color-white);

  &.unLockLogin {
    background-color: rgb(0 0 0 / 50%);
    backdrop-filter: blur(7px);
  }

  .setting-box,
  .login-box {
    display: flex;
    position: absolute;
    top: 45%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 260px;
    transform: translate(-50%, -50%);

    > * {
      margin-bottom: 14px;
    }

    .username {
      font-size: $font-size-large-x;
      font-weight: 700;
      margin: 18px 0;
      margin-bottom: $font-size-large-x;
    }
  }

  .lock-box {
    font-size: 34px;
    margin-top: 5vh;
    cursor: pointer;
    .tips {
      color: var(--el-color-white);
      text-align: center;
      margin-bottom: calc(40px + $space-large-x);
    }

    .lock {
      display: flex;
      justify-content: center;

      .lock-icon {
        .anticon-unlock {
          display: none;
        }

        &:hover .anticon-unlock {
          display: initial;
        }
      }
    }
  }

  .local-time {
    position: absolute;
    bottom: 60px;
    left: 60px;
    font-family: helvetica;

    .time {
      font-size: 70px;
      height: 60px;
      margin-bottom: $space-small;
    }

    .date {
      font-size: 35px;
    }
  }

  .computer-status {
    position: absolute;
    right: 60px;
    bottom: 60px;
    font-size: 24px;

    > * {
      margin-left: 14px;
    }

    .network {
      position: relative;

      &.offline::before {
        content: '';
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 28px;
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: var(--el-color-danger);
      }
    }
  }
}
</style>
